<template>
  <view class="account-detail">
    <image class="user-img" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/img_${gender === '2' ? 'default' : gender === 'O' ? 'girl' : 'boy'}.png`" />
    <view class="user-name">
      {{ familyName }}
    </view>

    <view class="detail-list">
      <view class="list-name">
        家庭成员（{{ memberList.length }}）
      </view>

      <view class="list-content">
        <view v-for="item in memberList" :key="item.id" class="list-item">
          <view class="item-left">
            <text class="item-name">
              {{ item.mobile }}
            </text>
            <text class="item-num">
              {{ item.type === 1 ? '创建者' : item.familyRoleName }}
            </text>
          </view>
          <view v-if="canEdit && item.type !== 1" class="item-btn" @click="handleRemove(item)">
            移除成员
          </view>
        </view>
      </view>
    </view>

    <view v-if="canEdit" class="detail-btn" @click="handleAdd">
      + 添加其他成员
    </view>
  </view>

  <ConfirmOverlay v-model:show="show" :title="isAdd ? '家庭组的成员，拥有该家庭组内所有成员的阅读权限，可以进行所有成员的阅读打卡' : '确定从家庭账户中移除该成员？'" :confirm-text="isAdd ? '去添加' : '移除'" @confirm="handleConfirm" />
</template>

<script lang="ts" setup>
import { delFamilyMember, getFamilyMembers } from '@/api/my';
import type { FamilyMember, GetFamilyMembersResult } from '@/api/my/type';

const memberList = ref<GetFamilyMembersResult['list']>([]);
const canEdit = ref(false);
const gender = ref('2');
const familyName = ref('');
const familyCode = ref('');
const getList = () => {
  getFamilyMembers(familyCode.value).then((res: GetFamilyMembersResult) => {
    memberList.value = res.list;
    canEdit.value = res.accountFlag === 1;
  });
};

onLoad((option: any) => {
  familyName.value = option.name;
  gender.value = option.gender;
  familyCode.value = option.code;
  uni.setNavigationBarTitle({
    title: option.name,
  });
  getList();
});

const show = ref<boolean>(false);
const isAdd = ref<boolean>(true);
const delItem = ref<FamilyMember>();
const handleConfirm = () => {
  show.value = false;
  if (isAdd.value) {
    uni.navigateTo({
      url: `/pages/views/invite/index?familyCode=${familyCode.value}&gender=${gender.value}&familyName=${familyName.value}`,
    });
  }
  else {
    delFamilyMember(delItem.value!.id).then(() => {
      getList();
    });
  }
};

const handleAdd = () => {
  show.value = true;
  isAdd.value = true;
};

const handleRemove = (item: FamilyMember) => {
  delItem.value = item;
  show.value = true;
  isAdd.value = false;
};
</script>

<style lang="scss" scoped>
.account-detail {
  padding: 24rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .user-img {
    width: 88rpx;
    height: 88rpx;
  }

  .user-name {
    padding-top: 14rpx;
    padding-bottom: 4rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    line-height: 48rpx;
  }

  .detail-list {
    width: 100%;
    padding: 20rpx 0;

    .list-name {
      padding-left: 40rpx;
      padding-bottom: 10rpx;
      font-size: 24rpx;
      color: #979797;
      line-height: 36rpx;
    }

    .list-content {
      padding: 0 40rpx;
      background: #fff;

      .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 38rpx 0;
        border-bottom: 1rpx solid #DEDEDE;

        .item-left {
          display: flex;
          flex-direction: column;

          .item-name {
            font-weight: bold;
            font-size: 32rpx;
            color: #000000;
            line-height: 48rpx;
          }

          .item-num {
            font-size: 2r4px;
            color: #686868;
            line-height: 36rpx;
          }
        }

        .item-btn {
          padding: 0 18rpx;
          border-radius: 10rpx;
          border: 1rpx solid #D13D32;
          font-size: 28rpx;
          color: #D13D32;
          line-height: 58rpx;
        }
      }

      .list-item:last-child {
        border-bottom: none;
      }
    }
  }

  .detail-btn {
    width: 100%;
    padding: 0 60rpx;
    height: 160rpx;
    display: flex;
    align-items: center;

    font-size: 32rpx;
    color: #0D8AFC;
    background: #fff;
  }
}
</style>
